<template>
  <div class="app-container">
    <div style="width: 700px;">
      <search-input v-model="value" @search="search"/>
    </div>

    <el-row>
      <el-col :span="16">
        <div v-for="item in list" :key="item.id" style="margin-top: 20px;">
          <el-card>
            <div slot="header" class="clearfix">
              <label style="font-size: 18px;">
                <a href="#">{{ item.title }}</a>
              </label>
              <div style="float: right; padding: 3px 0">
                {{ item.author }} - {{ item.createTime }}
              </div>
            </div>
            <div class="item-abstract">
              {{ item.abstract }}
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import SearchInput from './search-input'
import storage from './storage'
import { search } from '@/api/search/index'

export default {
  components: { SearchInput },
  data() {
    return {
      value: '',
      list: []
    }
  },
  created() {
    this.search(storage.get())
  },
  methods: {
    search(val) {
      if (val) {
        storage.set(val)
        this.value = val

        search(val).then(({ data }) => { this.list = data })
      } else {
        this.$router.push({ name: 'Search' })
      }
    }
  }
}
</script>
<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.app-container {
  background-color: #414a58;
}

.item-abstract {
  height: 80px;
  /*word-break:break-all;*/
  /*word-wrap:break-word;*/
  /*overflow: hidden;*/
  /*max-height: 100%;*/
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>
